import React from "react";
import { myContext } from '@/utils/context'
import style from './scss/grandFather.scss';

const {Provider, Consumer } = myContext
//这是爷爷
class GrandFather extends React.Component{
    render() {
        const {name, age, sex} = {name: '小李', age: 12, sex: '男'}
        let obj = {name, age, sex}
        return(
            <div className={style.father}>
                <h1>爷爷组件</h1>
                <p>这是父组件的内容</p>
                <p>姓名：{name}</p>
                <p>年龄：{age}</p>
                <p>性别：{sex}</p>
                <hr/>
                <Provider value={obj}>
                    <Father />
                </Provider>

            </div>
        )
    }
}

class Father extends React.Component{
    render() {
        return(
            <div className={style.father1}>
                <h1>这是爸爸</h1>
                <hr/>
                <Sunzi />
            </div>
        )
    }
}

class Sunzi extends React.Component{
    //方式一
    static contextType = myContext;
    render() {
        let {name, age, sex} =this.context
        return(
            <div className={style.box}>
                <div>
                    <div>这是孙子</div>
                    <p>这是接受信息(方式一)</p>
                    <div>名字：{name}</div>
                    <div>年龄：{age}</div>
                    <div>性别：{sex}</div>
                </div>
                <div>
                    <h2>接受方式二Comsumer</h2>
                    <Consumer>
                        {({name, age, sex}) => {
                            return(
                                <ul>
                                    <li>姓名：{name}</li>
                                    <li>年龄：{age}</li>
                                    <li>性别：{sex}</li>
                                </ul>
                            )
                        }}
                    </Consumer>
                </div>
            </div>

        )
    }
}

export default GrandFather;